<template>


    <a-modal :title="record.name+' ('+record.code+')   模块参数详情'" :width="1024"
             :destroyOnClose="true" :maskClosable="false"
             :visible="visible" @cancel="handleCancel">


        <a-list size="small" item-layout="horizontal" :data-source="dataSource">


            <a-list-item slot="renderItem" slot-scope="item, index">
<!--
                <a-popconfirm slot="actions"
                              title="确定要删除这个配置项吗?" @confirm="deleteItem(item)">
                    <a-icon class="font-size-16" type="delete"/>
                </a-popconfirm>
    -->

                <a-icon class="font-size-16" slot="actions" type="form" @click="openItemModal(item)"/>
                <a-icon class="font-size-16" slot="actions" type="sync"/>
                <a-list-item-meta :description="item.description">
                    <p slot="title" class="text-blue">{{ item.title }}</p>
                </a-list-item-meta>
                <small style="padding-right: 24px" class="text-aux ">{{item.itemKey}}</small>
                <span class="font-size-16  text-danger">{{item.itemValue}}</span>
            </a-list-item>
        </a-list>


        <!-- Modal 页脚 -->
        <template slot="footer">
            <a-button @click="handleCancel">关闭</a-button>
            <a-button type="primary" :loading="loading" @click="openItemModal">添加参数配置项</a-button>
        </template>


        <ItemEditModal v-if="ItemEditModalShow" :paramCode="record.code" :record="itemEditModalRecord"
                       @closeModal="closeItemModal"/>

    </a-modal>

</template>
<script>

    import {getParamItemList, paramItemDelete} from "../public/http";

    export default {

        props: ["record"],

        components: {ItemEditModal: () => import('./item_edit')},

        data() {
            return {
                loading: false, //按钮Loading
                visible: true, //modal 显示状态
                dataSource: [],


                ItemEditModalShow: false,
                itemEditModalRecord: {},

            };
        },
        methods: {


            openItemModal(record) {
                this.itemEditModalRecord = record;
                this.ItemEditModalShow = true


            },


            closeItemModal(e) {

                this.ItemEditModalShow = false
                this.itemEditModalRecord = {};
                if (e.render) {
                    this.getDataSource()
                }


            },



            //删除配置信息
            deleteItem(record) {

                paramItemDelete(record.id).then(res => {
                    this.$exMod.ajaxMessage(res);
                    res.code === 0 ? this.getDataSource() : null;
                })


            },


            //关闭弹窗
            handleCancel() {
                this.visible = false;
                this.$emit('closeModal', {
                    render: false
                });
            },


            getDataSource() {
                getParamItemList(this.record.code).then(res => {
                    if (res.code === 0) {
                        this.dataSource = res.data.result
                    }
                })

            },


            async init() {

                await this.getDataSource();

            }


        },


        created() {
            this.init();
        }


    };
</script>

<style scoped>


    .box {


        padding: 4px;
        height: 600px;
        overflow-y: scroll;
    }
</style>
